<template>
    <div class="scroll-container" ref="scrollContainerRef" @wheel.prevent="handleScroll" >
    <div class="scroll-wrapper" ref="scrollWrapperRef" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
   import { ref } from 'vue'

   const top = ref(0)
   const delta = 15

   const handleScroll = (e)=> {
      const eventDelta = e.wheelDelta || -e.deltaY * 3
      const scrollContainerRef = ref()
      const scrollWrapperRef = ref()
      const containerHeight = scrollContainerRef.offsetHeight
      const wrapperHeight = scrollWrapperRef.offsetHeight
      if(eventDelta>0){
        top.value = Math.min(0, top.value + eventDelta)
      } else {
        if(containerHeight - delta < wrapperHeight){
            if(top.value>=(containerHeight-wrapperHeight-delta)){
                top.value = Math.max(top.value + eventDelta, containerHeight - wrapperHeight + delta)
            }
        } else {
            top.value = 0
        }
      }
   }
</script>